<!-- 添加/编辑工作模式 -->
<template>
  <div class="addWorkingSetting">
    <el-tabs
      v-model="workPatternType"
    >
      <el-tab-pane
        label="礼拜制"
        name="1"
      >
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="工作模式名称"
            prop="name"
          >
            <el-input
              v-model="ruleForm.name"
              placeholder="请填写工作模式名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="连续工作天数"
            prop="workDayList"
          >
            <el-checkbox-group v-model="ruleForm.workDayList">
              <el-checkbox
                label="周一"
                name="type"
              ></el-checkbox>
              <el-checkbox
                label="周二"
                name="type"
              ></el-checkbox>
              <el-checkbox
                label="周三"
                name="type"
              ></el-checkbox>
              <el-checkbox
                label="周四"
                name="type"
              ></el-checkbox>
              <el-checkbox
                label="周五"
                name="type"
              ></el-checkbox>
              <el-checkbox
                label="周六"
                name="type"
              ></el-checkbox>
              <el-checkbox
                label="周日"
                name="type"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="工作时间"
            required
          >
            <el-time-picker
              v-model="ruleForm.workTimes"
              is-range
              format="HH:mm"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item class="work-btn">
            <el-button @click="closeContinuousWorkSetting">取消</el-button>
            <el-button
              type="primary"
              @click="addWeekWorkSetting('ruleForm')"
            >确定</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        label="连续制"
        name="2"
      >
        <el-form
          ref="continuousForm"
          :model="continuousForm"
          :rules="continuousRules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="工作模式名称"
            prop="name"
          >
            <el-input
              v-model="continuousForm.name"
              placeholder="请填写工作模式名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="连续工作天数"
            prop="workDayNum"
          >
            <span>上</span>
            <el-input
              v-model="continuousForm.workDayNum"
              placeholder="请输入"
              style="width: 160px;"
            ></el-input>
            <span style="position: absolute; left: 27%;">天</span>
            <span style="margin-left: 40px;">休</span>
            <el-input
              v-model="continuousForm.restDayNum"
              placeholder="请输入"
              style="width: 160px;"
            ></el-input>
            <span style="position: absolute; left: 67%;">天</span>
          </el-form-item>
          <el-form-item
            label="工作时间"
            required
          >
            <el-time-picker
              v-model="continuousForm.workTimes"
              is-range
              value-format="HH:mm"
              format="HH:mm"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item class="work-btn">
            <el-button
              @click="closeContinuousWorkSetting"
            >取消</el-button>
            <el-button
              type="primary"
              @click="addContinuousWorkSetting('ruleForm')"
            >确定</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { addWorkHistory, workHistoryInfo, updateWorkHistory } from '@/api/transit'

export default {
  props: {
    dialogVisible: {
      type: Boolean
    },
    getWorkAettingList: {
      type: Function
    },
    id: {
      type: String
    }
  },
  data() {
    return {
      weekObj: {
        monday: '2',
        tuesday: '2',
        wednesday: '2',
        thursday: '2',
        friday: '2',
        saturday: '2',
        sunday: '2'
      },
      workDayobj: {
        monday: '周一',
        tuesday: '周二',
        wednesday: '周三',
        thursday: '周四',
        friday: '周五',
        saturday: '周六',
        sunday: '周日'
      },
      workPatternType: '1', // 工作模式
      ruleForm: {
        name: '',
        workDayList: [],
        workTimes: [+new Date(2024, 2, 10, 9, 0), +new Date(2024, 2, 10, 18, 0)]
      },
      continuousForm: {
        name: '',
        workDayNum: '',
        restDayNum: '',
        workTimes: [new Date(2024, 2, 10, 9, 0), new Date(2024, 2, 10, 18, 0)]
      },
      rules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' }
        ],
        workTimes: [
          { required: true, message: '请选择工作时间', trigger: 'change' }
        ],
        workDayList: [
          { required: true, message: '工作天数不能为空', trigger: 'change' }
        ]
      },
      continuousRules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' }
        ],
        workTimes: [
          { required: true, message: '请选择工作时间', trigger: 'change' }
        ],
        restDayNum: [
          { required: true, message: '休息天数不能为空', trigger: 'change' }
        ],
        workDayNum: [
          { required: true, message: '工作天数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.id) {
      this.getSettingDetail()
    }
  },
  methods: {
    async getSettingDetail() {
      const that = this
      const res = await workHistoryInfo(this.id)
      console.log(res)
      const { workPatternType, name, workDayNum, restDayNum, workStartMinute1, workEndMinute1 } = res.data
      that.workPatternType = workPatternType.toString()
      if (workPatternType === 2) {
        this.continuousForm.workTimes = [new Date(workStartMinute1 * 60 * 1000), new Date(workEndMinute1 * 60 * 1000)]
        this.continuousForm.name = name
        this.continuousForm.workDayNum = workDayNum
        this.continuousForm.restDayNum = restDayNum
      } else if (workPatternType === 1) {
        this.ruleForm.name = name
        this.ruleForm.workTimes = [new Date(workStartMinute1 * 60 * 1000), new Date(workEndMinute1 * 60 * 1000)]
        const obj = res.data
        for (const k in that.weekObj) {
          that.weekObj[k] = obj[k]
        }
        for (const key in that.weekObj) {
          if (that.weekObj[key] === 1) {
            that.ruleForm.workDayList.push(that.workDayobj[key])
          }
        }
      }
    },
    closeContinuousWorkSetting() {
      this.$emit('changeDialogVisible', false)
      this.$emit('changeId', null)
    },
    addWeekWorkSetting(formName) {
      const that = this
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          that.ruleForm.workDayList.forEach(ele => {
            for (const k in that.workDayobj) {
              if (ele === that.workDayobj[k]) {
                that.weekObj[k] = '1'
              }
            }
          })
          const workDayNum = that.ruleForm.workDayList.length
          const restDayNum = 7 - workDayNum
          const workStartMinute1 = that.ruleForm.workTimes[0] / 1000 / 60
          const workEndMinute1 = that.ruleForm.workTimes[1] / 1000 / 60
          that.data = {
            id: that.id,
            ...this.weekObj,
            workStartMinute1,
            workEndMinute1,
            workDayNum,
            restDayNum,
            workPatternType: that.workPatternType,
            name: that.ruleForm.name
          }
          if (that.id) {
            const editRes = await updateWorkHistory(that.data)
            if (editRes.code === 200) {
              that.$message.success('修改成功')
            } else {
              that.$message.error(editRes.msg)
            }
            console.log(editRes)
          } else {
            const res = await addWorkHistory(that.data)
            if (res.code === 200) {
              that.$message.success('添加成功')
            } else {
              that.$message.error(res.msg)
            }
          }
          that.getWorkAettingList()
          that.$emit('changeDialogVisible', false)
          that.$emit('changeId', null)
        }
      })
    },
    addContinuousWorkSetting(formName) {
      const that = this
      this.$refs.continuousForm.validate(async (valid) => {
        if (valid) {
          const workStartMinute1 = that.continuousForm.workTimes[0] / 1000 / 60
          const workEndMinute1 = that.continuousForm.workTimes[1] / 1000 / 60
          that.data = {
            id: that.id,
            workStartMinute1,
            workEndMinute1,
            workDayNum: that.continuousForm.workDayNum,
            restDayNum: that.continuousForm.restDayNum,
            workPatternType: that.workPatternType,
            name: that.continuousForm.name
          }
          if (that.id) {
            const editRes = await updateWorkHistory(that.data)
            if (editRes.code === 200) {
              that.$message.success('修改成功')
            } else {
              that.$message.error(editRes.msg)
            }
            console.log(editRes)
          } else {
            const res = await addWorkHistory(that.data)
            if (res.code === 200) {
              that.$message.success('添加成功')
            } else {
              that.$message.error(res.msg)
            }
          }
          that.getWorkAettingList()
          that.$emit('changeDialogVisible', false)
          that.$emit('changeId', null)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
 ::v-deep .work-btn{
    margin-bottom: 0;
    margin-left: 20%;
}
</style>
